<template>
  <view class="pages">
    <!-- #ifdef APP-PLUS-->
		<u-sticky offset-top="0" zIndex="10000">
		<!-- #endif -->
		  <!-- #ifdef H5 -->
		  <u-sticky offset-top="-44" zIndex="10000">
		  <!-- #endif -->
      <h-nav-bar title="患者管理" backgroundColor="#fff" rightIcon="search" leftIcon="" @clickRight="navigateTo( `/patients/search/index?type=${getpatientPreams.type}`)"></h-nav-bar>
    	<view class="nav_box" v-if="showTab">
    		<up-tabs :list="tablist" @click="onTabClick" :scrollable="false" :current="currentTab" keyName="transaction_type_name" :inactiveStyle="{
		      	           fontSize: '30rpx',
		      	           lineHeight:2.5,
		      	           color: '#5C5C5C',
		      	        }" :activeStyle="{
		      	           fontSize: '30rpx',
		      	           lineHeight:2.5,
		      	           color: '#202020',
		      	         }" :lineHeight="5" lineColor="#00C1B9">
		      </up-tabs>
    	</view>
    </u-sticky>
    <view style="margin-top: 20rpx"></view>
    <view v-if="getpatientPreams?.type != 2" style="align-self: flex-end;">
      <view v-if="patientList?.length > 0 || isShowBindBox" class="bind_box" @click="showBindChange()">
        <text>只看已绑定</text>
        <view class="bind_set">
          <image src="@/static/index/chd.png" v-if="isShowBind">
          </image>
          <image src="@/static/index/chc.png" v-else></image>
        </view>
      </view>
    </view>
    <view v-if="patientList?.length > 0" class="patient_list_box">
      <view class="patient_list" v-for="(item, index) in patientList" :key="index" @click="toPatienDetails(item)">
        <image :src="item?.avatar || 'https://ossresource.miyingbl.com/user_avatar/0.png'" mode="scaleToFill" />
        <view
          class="patient_list_right"
          :style="{ border: index == patientList?.length - 1 ? '0' : '1' }"
        >
          <view class="patient_info">
            <view class="patient_info_name">{{ item?.nickname }}</view>
            <view v-if="item?.unread > 0" style="font-weight: 400;font-size: 24rpx;color: #5C5C5C;">待处理消息：{{ item?.unread }}条</view>
            <!-- <view class="patient_info_sex">
              <text>{{ item?.sex }}</text>
              <view class="info_leng"></view>
              <text>{{ item?.age }}岁</text>
            </view> -->
          </view>
          <!-- <view class="see_doctor_time">
            <view>最近就诊：</view>
            <text>{{ item?.lastChatTime }}</text>
            <view style="margin-left: 10rpx;">{{ item?.chat_time  }}</view>
          </view> -->
          <view>
            <view class="patient_tag" v-for="(i, n) in item?.lable" :key="n">
              <view v-if="i?.type == 1" class="tag_item yun_tag">{{ i.text }}</view>
              <view v-if="i?.type == 2" class="tag_item man_tag">{{ i.text }}</view>
              <view v-if="i?.type == 3" class="tag_item patients_tag">{{ i.text }}</view>
              <view v-if="item?.is_binding == 1" class="tag_item man_tag">已绑定</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <h-not-list
      v-if="loaded && patientList?.length == 0"
      title="暂无患者记录"
      defaultHeight="600"
      marginBottom="30"
      img="/static/patient/no_patient.png"
    ></h-not-list>
  </view>
  <!-- 登录 -->
  <h-login ref="login"></h-login>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { navigateBack, navigateTo, formatDate, showToast } from '@/utils'
import { onLoad, onReady, onPageScroll, onShow, onPullDownRefresh } from '@dcloudio/uni-app'
import { useMemberStore } from '@/stores'
import { getpatientData, getDoctorBusTypeApi } from '@/api/patients/index'
//是否只显示绑定
const isShowBind = ref(false)
const login = ref(null)
const token = ref('')
const classTitleValue = ref('患者管理')
//患者列表
const patientList = ref([])

 const currentTab=ref(0)
 const isBind=ref(false)
 const tablist=ref([])
onLoad(()=>{

})
onReady(()=>{
 // #ifdef APP-PLUS || APP-IOS || APP-ANDROID
 uni.preLogin({
    provider: 'univerify',
  })
  // #endif
})
//最总页
const last_page = ref(0)
onShow(() => {
  const store = useMemberStore()
  token.value = store?.token
  if(token.value){
    getpatientPreams.value.page = 1
    last_page.value = 0
    patientList.value = []
    getDoctorBusType()
  }else{
    showLogin()
  }

})

function toBind(){
	isBind.value=!isBind.value
	patientList.value = []
	getpatientPreams.value.page = 1
  getpatientList()
}
  // 切换顶部tab
  const onTabClick = (e) => {
    isShowBindBox.value = false
    console.log(e)
    currentTab.value=e.index
    patientList.value = []
    getpatientPreams.value.type = e.transaction_type_id
    getpatientPreams.value.page = 1
    getpatientPreams.value.binding = 1
    isShowBind.value = false
    getpatientList()
  }
//登录
function showLogin() {
  nextTick(() => {
      login.value.open()
    })
}
//搜索
// const searchHandler = (e) => {
//   console.log(1)
//   // navigateTo( '/pages/index/indexSearch?index=1&isfocus=true')
// }
// 获取医生开通的业务
const showTab = ref(false)
async function getDoctorBusType() {
  const res = await getDoctorBusTypeApi()
  if(res?.data?.length > 0){
    tablist.value = res?.data
    if(res?.data?.length > 1){
      showTab.value = true
    }else{
      showTab.value = false
    }
  }else{
    showTab.value = false
  }
  let transactionId = uni.getStorageSync('transactionId')
  console.log(transactionId)
  if(!transactionId){
    getpatientPreams.value.type = tablist?.value[0]?.transaction_type_id
    currentTab.value = 0
  }else{
    getpatientPreams.value.type = transactionId
    tablist.value.map((item,index) =>{
      if(item?.transaction_type_id == transactionId){
        currentTab.value = index
      }
    })
  }
  getpatientList()
}
//获取患者列表
const getpatientPreams = ref({
  words:'',
  page: 1,
  limit: 10,
  type:1,
  binding:1
})
const loaded = ref(false)
async function getpatientList() {
  loaded.value = false
  const res = await getpatientData(getpatientPreams.value)
  if (res?.code == 200) {
    uni.removeStorageSync('transactionId')
    loaded.value = true
    if(res?.data?.data){
      let list = res?.data?.data?.map((item) => {
        item.key = 'chat_time'
        if(item.sex == 0){
          item.sex = '女'
        }else{
          item.sex = '男'
        }
        return item
      })

      last_page.value = res?.data?.last_page
      patientList.value =
      getpatientPreams.value.page == 1
          ? list
          : patientList.value.concat(list)
    }else{
      patientList.value = []
    }

  }else{
    loaded.value = true
  }
}
//去详情
function toPatienDetails(row){
  if(row.type == 1){
    navigateTo(`/patients/info/index?userId=${row?.uid}`)
  }else if(row.type == 2){
    navigateTo(`/patients/info/manIndex?userId=${row?.uid}`)
  }else{
    navigateTo(`/patients/info/pediatrics?userId=${row?.uid}`)
  }
}
//是否只看绑定
const isShowBindBox = ref(false)
function showBindChange(){
  isShowBindBox.value = true
  isShowBind.value = !isShowBind.value
  if(isShowBind.value){
    patientList.value = []
    getpatientPreams.value.binding = 2
    getpatientPreams.value.page = 1
    getpatientList()
  }else{
    patientList.value = []
    getpatientPreams.value.binding = 1
    getpatientPreams.value.page = 1
    getpatientList()
  }
}
//下拉刷新
onPullDownRefresh(() => {
  getpatientPreams.value.page == 1
  patientList.value = []
  getpatientList()
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 1000)
})
</script>

<style lang="scss" scoped>
.navbgColor {
  width: 750rpx;
  background: #fff;
  padding-bottom: 10rpx;
  font-family: PingFangSC, PingFang SC;
  .searchBox {
    width: 702rpx;
    height: 70rpx;
    background: #f5f6f8;
    border-radius: 35rpx;
    margin: 0 auto;
    display: flex;
    padding: 0;
    box-sizing: border-box;
    align-items: center;
    font-size: 24rpx;
    color: #aaa;
    line-height: 28rpx;
    text-align: left;
    font-style: normal;
    padding-left: 20rpx;
    .search {
      padding-left: 8rpx;
      font-size: 26rpx;
    }
  }
}
.nav_box{
	background: #FFF;
	width: 750rpx;
	padding-bottom: 10rpx;
}
.head_bind{
	text-align: right;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #5C5C5C;
	line-height: 30rpx;
	padding: 24rpx;
	image{
		width: 30rpx;
		height: 30rpx;
		margin-left: 10rpx;
		float: right;
	}
}
.pages {
  width: 100%;
  min-height: 100vh;
  background: #f5f6f8;
  font-family: PingFangSC, PingFang SC;
  padding-bottom: 20rpx;
  display: flex;
  align-items: center;
  flex-direction: column;
  .bind_box{
    display: flex;
    align-items: center;
    margin-right: 24rpx;
    margin-bottom: 20rpx;
    text{
      font-weight: 400;
      font-size: 24rpx;
      color: #5C5C5C;
    }
    .bind_set{
      image{
        width:30rpx;
        height:30rpx;
        margin-top: 10rpx;
        margin-left:8rpx;
      }
    }
  }
  .patient_list_box {
    width: 702rpx;
    background: #ffffff;
    border-radius: 20rpx;
    margin: 0 auto;
    padding: 20rpx;

    //列表
    .patient_list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      image {
        width: 150rpx;
        height: 150rpx;
        border-radius: 10rpx;
      }
      .patient_list_right {
        width: 492rpx;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
        border-bottom: 1rpx solid #e8e8e8;
        height: 190rpx;
        padding: 16rpx 0;
        .patient_info {
          width:100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .patient_info_name {
            font-size: 30rpx;
            color: #202020;
          }
          .patient_info_sex {
            display: flex;
            align-items: center;
            font-size: 26rpx;
            color: #00c1b9;
            text {
              margin: 0 12rpx;
            }
            .info_leng {
              height: 22rpx;
              width: 1rpx;
              background: #aaaaaa;
            }
          }
        }
        .see_doctor_time {
          display: flex;
          align-items: center;
          color: #5c5c5c;
          font-size: 26rpx;
        }
        .patient_tag {
          display: flex;
          .tag_item {
            height: 40rpx;
            background: #ffffff;
            border-radius: 19rpx;
            border: 1rpx solid #dea42e;
            padding: 0 10rpx;
            font-size: 24rpx;
            line-height: 40rpx;
            color: #dea42e;
            margin-right: 10rpx;
          }
          .yun_tag {
            border-color: #d76c6c;
            color: #d76c6c;
          }
          .man_tag{
            border-color: #00B3C5;
            color: #00B3C5;
          }
          .patients_tag{
            border-color: #54CEAB;
            color: #54CEAB;
          }
        }
      }
    }
  }
}
</style>
